<template>
  <div class="table-block">
    <div class="table-block-list" ref="tableRef">
      <div
        v-for="item in columnArr"
        :key="item.fixed"
        class="table-block-list-content"
        :class="[
          item.shadow && `content-${item.fixed}`, 
          { 'first-col': showBorder && item.isFirstCol && item.fixed === 'center'},
          { 'list-last': showBorder && item.isLastCol && item.fixed === 'center'}
        ]"
        :style="{
          width: item.width
        }"
      >
        <tableTitle
          v-if="showTitle"
          v-bind="$attrs"
          :titleList="item.titleList"
          :columns="item.col"
          :rowWidth="item.colWidth"
          :fixedCol="item.fixed"
          :isXScroll="isXScroll"
          :showBorder="showBorder"
          :maxDeep="maxDeep"
          :id="item.fixed === 'center' ? rowTitleId : ''"
          @scroll="e => onscrollHandler(e, rowListId)"
        >
          <template v-for="ite in item.headerSlots" #[ite.slotHeader]="{ titleItem }">
            <slot :name="ite.slotHeader" :titleItem="titleItem"> </slot>
          </template>
        </tableTitle>
        <list
          v-if="showList && data.length > 0"
          v-bind="$attrs"
          :columns="item.col"
          :data="data"
          :rowWidth="item.colWidth"
          :fixedCol="item.fixed"
          :isXScroll="isXScroll"
          :showBorder="showBorder"
          :fixedWidthDefault="unref(fixedWidthDefault)"
          :fixedLeftLength="fixedLeftLength"
          :centerColumnLength="centerColumnLength"
          :id="item.fixed === 'center' ? rowListId : ''"
          @scroll="e => onscrollHandler(e, rowTitleId)"
        >
        </list>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, unref, onMounted, nextTick, useSlots } from 'vue'
import tableTitle from './title.vue'
import list from './list.vue'
import { useColumns } from '@/hooks/useColumns.ts'
import { useDesign } from '@/hooks/useDesign.ts'
import { useColumnList } from './hooks/useColumnList.ts'
const props = defineProps({
  // 展示的列
  columns: {
    type: Array,
    default: () => []
  },
  // 源数据
  data: {
    type: Array,
    default: () => []
  },
  // 是否显示标题头
  showTitle: {
    type: Boolean,
    default: true
  },
  // 是否显示列表数据
  showList: {
    type: Boolean,
    default: true
  },
  // 是否显示边框
  showBorder: {
    type: Boolean,
    default: false
  }
})
const tableRef = ref(null)
const fixedWidthDefault = ref(70) // 单元格默认宽度
// 处理列数据
const { list: colList, maxDeep} = useColumns(props.columns)
// 获取左侧列数、中间列数
const { fixedLeftLength, centerColumnLength, isXScroll } = useDesign(tableRef, colList, fixedWidthDefault)
// 获取最终要渲染的数据
const { columnArr } = useColumnList(colList, maxDeep, isXScroll, fixedWidthDefault)

const rowTitleId = ref('rowTitle' + Math.ceil(Math.random() * 10 ** 10))
const rowListId = ref('rowList' + Math.ceil(Math.random() * 10 ** 10))
// title和list同步滚动
const onscrollHandler = function(e, id) {
  const dom = document.querySelector(`#${id}`)
  // console.log('onscrollHandler===>', e, dom)
  if (dom) {
    dom.scrollLeft = e?.target?.scrollLeft
  }
}
</script>
<style lang="less" scoped>
.table-block {
  width: 100%;
  max-width: 100%;
  .table-block-list {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    &-content {
      position: relative;
      &.content-left::before,
      &.content-right::before {
        content: '';
        position: absolute;
        width: 8px;
        height: 100%;
        top: 0;
        bottom: 0;
        right: -7px;
        background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #f1f1f1 100%);
        z-index: 80;
      }
      &.content-right::before {
        left: -1px;
      }
      &.content-right::after,
      &.first-col::before,
      &.list-last::after{
        content: '';
        position: absolute;
        top: 0;
        width: 1px;
        height: 100%;
        background-color: #dcdee0;
        transform: scaleX(0.5);
        box-sizing: border-box;
        z-index: 100;
      }
      &.first-col::before {
        left: 0;
      }
      &.list-last::after,
      &.content-right::after {
        right: 0;
      }
    }
    
  }
}
</style>
